<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<title>Animation 示例</title>  
<style>  
  .animation-box {  
    width: 100px;  
    height: 100px;  
    background-color: red;  
    position: relative;  
    animation-name: exampleAnimation; /* 动画名称 */  
    animation-duration: 4s; /* 动画持续时间 */  
    animation-timing-function: ease-in-out; /* 动画时间函数 */  
    animation-delay: 0s; /* 动画延迟时间 */  
    animation-iteration-count: infinite; /* 动画播放次数（无限次） */  
    animation-direction: alternate; /* 动画方向（交替） */  
    animation-fill-mode: forwards; /* 动画填充模式（向前填充） */  
    animation-play-state: running; /* 动画播放状态（正在运行） */  
  }  
  
  @keyframes exampleAnimation {  
    0% {  
      background-color: red;  
      left: 0;  
      transform: rotate(0deg);  
      opacity: 1;  
    }  
    50% {  
      background-color: yellow;  
      left: 200px;  
      transform: rotate(180deg);  
      opacity: 0.5;  
    }  
    100% {  
      background-color: blue;  
      left: 0;  
      transform: rotate(360deg);  
      opacity: 1;  
    }  
  }  

  /*
  @keyframs xx
  animation-name
  animation-duration
  animation-timing-function
  animation-delay

  
  */
</style>  
</head>  
<body>  
  
<div class="animation-box"></div>  
  
</body>  
</html>